<template>
  <page-header-wrapper>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="车行列表">
      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
      </div>
    </a-card>
    <div>
      <s-table
        ref="table"
        size="default"
        :localLoading="tableLoading"
        :rowKey="(record) => record.id"
        :showPagination="false"
        :columns="columns"
        :data="loadData"
      >
        <span slot="action" slot-scope="text, record">
          <a
            @click="toDetail(record)"
          >
            编辑
          </a>
          <a-divider type="vertical"/>
          <a-popconfirm
            title="你确定要删除这条记录吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="confirmDelete(record.id)"
            @cancel="()=>{}"
          >
            <a href="#">删除电柜</a>
          </a-popconfirm>
        </span>
      </s-table>
    </div>
    <detail :visible="detailVisible" :model="model" @cancel="()=>{this.detailVisible = false}" @ok="modalOk" />
  </page-header-wrapper>
</template>

<script>
import { getCardealershipLists, deleteCardealership } from '@/api/cardealership'
import { STable } from '@/components'
import Detail from './Detail'

export default {
  name: 'CardealershipLists',
  data () {
    return {
      status: 'all',
      model: {},
      tableLoading: false,
      detailVisible: false,
      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '车行名称',
          dataIndex: 'name'
        },
        {
          title: '车行电话',
          dataIndex: 'tel'
        },
        {
          title: '备注',
          dataIndex: 'summary'
        },
        {
          title: '开放时间',
          dataIndex: 'openTime'
        },
        {
          title: '关闭时间',
          dataIndex: 'closeTime'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: (paramter) => {
        return getCardealershipLists({ $limit: 10, '$sort[id]': 1 }).then(res => {
          return {
            data: res.data
          }
        })
      }
    }
  },
  components: {
    STable,
    Detail
  },
  methods: {
    modalOk () {
      this.$refs.table.refresh(true)
      this.detailVisible = false
    },
    toDetail (record) {
      this.model = record
      this.detailVisible = true
    },
    handleAdd () {
      this.model = {
        place: {
          address: '',
          coordinate: {
            longitude: 0.00,
            latitude: 0.00
          }
        }
      }
      this.detailVisible = true
    },
    confirmDelete (id) {
      deleteCardealership(id).then(res => {
        this.tableLoading = false
        this.$refs.table.refresh()
        this.$notification['success']({
          message: '提示',
          description:
            '删除数据成功！'
        })
      }).catch(e => {
        this.$notification['error']({
          message: '提示',
          description:
            '删除数据失败！'
        })
        console.error(e)
      })
    }
  }
}
</script>
